<template>
  <div class="detail-content">
    <Form :formProps="formProps" @saveData="saveData">
      <template #config>
        <el-button v-if="configData.length === 0" @click="showDetailWindow" size="large" :icon="Plus" type="warning">添加菜品</el-button>
        <div v-else class="config-content">
          <div class="config-btn"> <el-button  @click="showDetailWindow" size="large" :icon="Plus" type="warning">添加菜品</el-button></div>
          <GTable
              :columns="configColumns"
              :data="configData"
              :isShowPagination="false"
          >
            <template #count="{ row }">
              <el-input-number v-model="row.count" />
            </template>
            <template #operation=" { row } ">
              <el-link type="warning" :underline="false" @click.stop="delConfigOne(row)">删除</el-link>
            </template>
          </GTable>
        </div>
      </template>
      <template #image>
        <upload-file @getImage="getImage" :page="page" :viewImage="viewImage" />
      </template>
    </Form>
    <Window :isShowWindow="isShowWindow" windowHeight="50%" :winTitle="winTitle" :isAddMore="false" @closeWin="closeWin" @cateSubMit="cateSubMit">
      <template #form>
        <div class="form-content">
          <el-tabs tab-position="left" v-model="activeCategoryId" @tab-change="handleChange"   style="height: 100%" class="demo-tabs">
            <el-tab-pane v-for="(category,index)  in categories" :name="category.categoryId"  :label="category.categoryName">
            </el-tab-pane>
            <GTable
                :data="tableData"
                :isShowPagination="false"
                :isSelection="true"
                @handleSelectionChange="handleSelectionChange"
                :columns="columns">
              <template #status="{ row }">
                <span>{{ row.status === 1 ? '在售' : '停售' }}</span>
              </template>
            </GTable>
          </el-tabs>
          <div class="selectedList">
            <div class="title">{{ `已选菜品（${configData.length}）` }}</div>
            <div class="items">
             <div class="item" v-for="(item,index) in configData" :key="index">
               <span>{{ item.name }}</span>
               <span class="price">￥ {{ item.price }} </span>
               <span class="del" @click="delItems(item)"><img src="../../assets/btn_clean@2x.png" alt=""></span>
             </div>
            </div>
          </div>
        </div>
      </template>
    </Window>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue'
import Form from '../../components/form.vue';
import { usePackageData } from './usePackageData';
import uploadFile from '../../components/uploadFile.vue';
import Window from '../../components/window.vue'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
let imageUrl = ref(null)
const router = useRouter()
function getImage(image) {
  imageUrl.value = image;
}
const page = computed(() => router.currentRoute.value.query?.page);
const { formProps, configData,categories,getTableData, tableData,activeCategoryId,columns,handleSelectionChange,delItems,configColumns,saveData,viewImage } = usePackageData(imageUrl,page);
let isShowWindow = ref(false)
let showConfigData = ref(false)
async function showDetailWindow () {
  isShowWindow.value = true
  await getTableData({categoryId: categories.value[0].categoryId})
}
async function handleChange (tab) {
  await getTableData({categoryId: tab})
}
function closeWin (val) {
  isShowWindow.value = val
}
function cateSubMit (flag) {
  isShowWindow.value = false
  showConfigData.value = true
}
const winTitle = computed(() => page.value === 'add' ? '添加菜品' : '编辑菜品')
function delConfigOne (row) {
  configData.value.forEach((item,index) => {
    if (row.dishId === item.dishId) {
      configData.value.splice(index,1)
    }
  })
}
</script>
<style scoped lang="css">
.detail-content {
  padding: 30px;
  background-color: var(--el-bg-color);
}
.form-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.config-content {
  background: #fafafb;
  padding: 20px;
  border: solid 1px #ccc;
  border-radius: 3px;
  width: 777px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.config-btn {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.selectedList {
  width: 40%;
  border-left: 2px solid #E4E7ED;
  padding: 0 10px 10px 10px;
  overflow: auto;
  height: 450px;
}
.items {
  height: auto;
  width: 100%;
}
.item {
  box-shadow: 0px 1px 4px 3px rgb(0 0 0 / 3%);
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  padding:10px;
  margin-top: 20px;
  border-radius: 6px;
  color: #818693;
}
img {
  width: 20px;
  height: 20px;
}
.del {
  display: flex;
  align-items: center;
  cursor: pointer;
}
:deep(.el-tabs)  {
  display: flex !important;
  width: 60% !important;
}
:deep(.el-tabs__content)  {
  width: 100% ;
}
</style>
